<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400|Open+Sans:400,400i" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="basic-widgets"> <div class="project-hover"> <img src="http://placehold.it/360x360" class="img-responsive transition"> <div class="text-view transition text-center"> <h3>More Information On</h3> <p>Improved Glass Conservatory Roofs</p> </div> <div class="btn-view transition text-center"> <a type="submit" class="btn btn-default">Submit</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="basic-widgets"> <div class="project-hover"> <img src="http://placehold.it/360x360" class="img-responsive transition"> <div class="text-view transition text-center"> <h3>More Information On</h3> <p>Improved Glass Conservatory Roofs</p> </div> <div class="btn-view transition text-center"> <a type="submit" class="btn btn-default">Submit</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="basic-widgets"> <div class="project-hover"> <img src="http://placehold.it/360x360" class="img-responsive transition"> <div class="text-view transition text-center"> <h3>More Information On</h3> <p>Improved Glass Conservatory Roofs</p> </div> <div class="btn-view transition text-center"> <a type="submit" class="btn btn-default">Submit</a> </div> </div> </div> </div> </div> </div>

body { font-family: 'Noto Serif', serif; color: #252525; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 16px; color: #757575; } .transition { -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .btn { padding: 8px 40px; border-radius: 2px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; background-color: #dd003b; color: #fff; } .btn:hover { background-color: #aa002d; color: #fff; } h3 { font-family: 'Noto Serif', serif; font-size: 20px; color: #444444; } .img-responsive { width: 100%; border-radius: 2px; } .basic-widgets { padding-top: 15px; padding-bottom: 15px; } /* project hover*/ .project-hover { position: relative; overflow: hidden; } .project-hover:hover .text-view { top: 40%; opacity: 1; } .project-hover:hover .btn-view { top: 60%; opacity: 1; } .project-hover:hover img { opacity: .8; } .project-hover .text-view { width: 95%; position: absolute; top: 35%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; font-weight: 600; } .project-hover .text-view h3 { margin-bottom: 10px; font-weight: 600; } .project-hover .btn-view { width: 100%; position: absolute; top: 65%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; }